<template>
  <main>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="需求类型" :label-width="formLabelWidth">
          <el-input v-model="form.reqType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" :label-width="formLabelWidth">
          <el-input v-model="form.proName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工程类型" :label-width="formLabelWidth">
          <el-input v-model="form.proType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工程编码" :label-width="formLabelWidth">
          <el-input v-model="form.proCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="采购类别" :label-width="formLabelWidth">
          <el-input v-model="form.bugType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="估算价格" :label-width="formLabelWidth">
          <el-input v-model="form.prePrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="采购范围" :label-width="formLabelWidth">
          <el-input v-model="form.buyRange" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工期需求" :label-width="formLabelWidth">
          <el-input v-model="form.timeReq" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商需求" :label-width="formLabelWidth">
          <el-input v-model="form.busReq" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="需求原因" :label-width="formLabelWidth">
          <el-input v-model="form.reqCause" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <div class="require-container">
      <div class="require-title">
        <span style="font-weight: 600; margin-left: 20px; margin-right: 20px">
          采购需求
        </span>
        <div class="require-btn-group">
          <button
            class="shadow-button shiny"
            type="primary"
            @click="publishRequire()"
            plain
          >
            发布
          </button>
          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @confirm="deleteHandler"
          >
            <el-button
              type="danger"
              slot="reference"
              icon="el-icon-delete"
              circle
            ></el-button>
          </el-popconfirm>
        </div>
      </div>
      <div class="require-body">
        <el-table
          stripe
          :data="tableData"
          style="width: 100%"
          height="250"
          @selection-change="handleSelectionChange"
        >
          <el-table-column fixed="right" label="操作" width="50">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="showFormDialog(scope.row)"
              ></el-button>
            </template>
          </el-table-column>

          <el-table-column prop="reqType" label="需求类型" width="150">
          </el-table-column>
          <el-table-column prop="proName" label="项目名称" width="120">
          </el-table-column>
          <el-table-column prop="proType" label="工程类型" width="120">
          </el-table-column>
          <el-table-column prop="proCode" label="工程编码" width="120">
          </el-table-column>
          <el-table-column prop="bugType" label="采购类别" width="120">
          </el-table-column>
          <el-table-column prop="prePrice" label="估算价格" width="300">
          </el-table-column>
          <el-table-column prop="buyRange" label="采购范围" width="120">
          </el-table-column>
          <el-table-column prop="timeReq" label="工期需求" width="120">
          </el-table-column>
          <el-table-column prop="busReq" label="供应商需求" width="300">
          </el-table-column>
          <el-table-column prop="reqCause" label="需求原因" width="120">
          </el-table-column>
          <el-table-column fixed="left" type="selection" width="55">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </main>
</template>

<script>
import {
  getRequirementPendingAll,
  deleteRequirementPending,
  addRequirement,
  publishRequirement,
} from "api/require.api";

export default {
  name: "requireManage",
  data() {
    return {
      multipleSelection: [],
      tableData: [],
      dialogFormVisible: false,
      form: {
        reqType: "",
        proName: "",
        proType: "",
        proCode: "",
        bugType: "",
        prePrice: "",
        buyRange: "",
        timeReq: "",
        busReq: "",
        reqCause: "",
      },
      fakeData: [
        {
          id: 1,
          reqType: "土石方工程类",
          proName: "提供土石方原料",
          proType: "提供原材料",
          proCode: "20211215",
          bugType: "原材料类别",
          prePrice: "100000",
          buyRange: "",
          timeReq: "12个月",
          busReq: "给建筑方提供建楼原材料",
          reqCause: "原材料提供",
        },
        {
          id: 2,
          reqType: "民用建筑工程类",
          proName: "民用建筑",
          proType: "建楼",
          proCode: "20211214",
          bugType: "建筑类别",
          prePrice: "100000",
          buyRange: "",
          timeReq: "12个月",
          busReq: "满足人们物质和文化生活需要的非生产性建筑物；",
          reqCause: "建筑民用建筑",
        },
        {
          id: 3,
          reqType: "土木类",
          proName: "建楼",
          proType: "建楼",
          proCode: "20211213",
          bugType: "造类别",
          prePrice: "100000",
          buyRange: "",
          timeReq: "12个月",
          busReq: "符合即可",
          reqCause: "建写字楼",
        },
        {
          id: 4,
          reqType: "工程类",
          proName: "精装修",
          proType: "装修",
          proCode: "20211212",
          bugType: "装修类别",
          prePrice: "1000",
          buyRange: "",
          timeReq: "2个月",
          busReq: "符合即可",
          reqCause: "大面积装修",
        },
      ],
      formLabelWidth: '120px',
    };
  },
  mounted() {
    this.getReqList();
  },
  methods: {
    showFormDialog(row) {
      this.dialogFormVisible = true;
      this.form = row;
    },
    // 删除管理
    deleteHandler() {
      const list = this.multipleSelection;
      if (list.length === 0) {
        this.$message.warning('请选择一条数据');
        return;
      }
      const ids = [];
      list.forEach((item) => {
        ids.push(item.id);
      });
      deleteRequirementPending(ids);
      this.$message.success("删除成功");
      this.getReqList();
    },
    createFakeData() {
      this.fakeData.forEach((item) => {
        item.id = new Date().getTime();
        addRequirement(item);
      });
      this.getReqList();
    },
    // 获取所有未发布的需求
    getReqList() {
      const response = getRequirementPendingAll();

      const { data, code, msg } = response;
      if (code !== 0) {
        this.$message.warning(msg);
        return;
      }

      this.tableData = data;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    setLocalData() {
      window.localStorage.setItem(
        `${window.location.host}_requireManage`,
        JSON.stringify(this.tableData)
      );
    },
    addTableData() {
      const data = this.$route.query.formData;
      if (!data) {
        return;
      }
      window.sessionStorage.setItem("addRequireFlag", false);
      this.tableData.push(data);
      this.setLocalData();
    },
    // 发布采购需求
    publishRequire() {
      if (this.multipleSelection.length < 1) {
        this.$message.warning("请至少选择一个数据");
        return;
      }

      const { msg } = publishRequirement(this.multipleSelection);
      this.$message.success(msg);

      setTimeout(() => {
        this.$router.push({
          path: "/hasRequiredManage",
        });
      }, 0);
    },
  },
};
</script>

<style lang="less" scoped>
.require-container {
  margin: 0 auto;
  padding: 20px;
  max-width: 80vw;
  .require-title {
    padding: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    background-color: #fff;
    .require-btn-group {
      ::v-deep {
        .el-button {
          margin-right: 20px;
        }
      }
    }
  }
  .require-body {
    padding: 20px;
    background-color: #fff;
  }
  ::v-deep {
    .el-table {
      height: 70vh !important;
    }
  }
}
</style>